<template>
    <div id="replay">
        <el-container>
            <el-main>
                <video width="100%" id="replayvideo" controls autoplay muted></video>
            </el-main>
            <el-aside width="20%">
                <replay-control @setVideoUrl="setVideoUrl"></replay-control>
            </el-aside>
        </el-container>
    </div>    
</template>

<script>
import ReplayControl from "../components/replay/ReplayControl";
import flvjs from "flv.js";

export default {
    components: {
        ReplayControl
    },
    data () {
        return {
            flvPlayer: null,
        };
    },
    methods: {
        setVideoUrl(url) {
            this.pausemix();
            this.createFlvPlayer(url);
        },
        // 将Flv播放器绑定都videoElement元素上去，播放videoUrl
        createFlvPlayer(videourl) {
            if (videourl != null && videourl != '' && flvjs.isSupported()) {
                this.flvPlayer = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    hasVideo: true,
                    hasAudio: false,
                    enableWorker: true,
                    cors: true,
                    url: videourl,
                });
                const videoPlayerElement = document.getElementById("replayvideo");
                this.flvPlayer.attachMediaElement(videoPlayerElement);
                this.flvPlayer.load();
                this.flvPlayer.play();
            }
        },
        // 停止混流播放并移除直播流抓取
        pausemix() {
            if(this.flvPlayer != null) {
                this.flvPlayer.pause();
                this.flvPlayer.unload();
                this.flvPlayer.detachMediaElement();
                this.flvPlayer.destroy();
                this.flvPlayer = null;
            }
        },
    },
    mounted () {
    },
    beforeDestroy() {
        this.pausemix();
    }
}
</script>

<style scoped>
.el-main {
    padding: 0 5px;
}
</style>